<template>
  <div class="MyCurriculum">
    <div class="table-wrap">
      <el-table
        :data="tableData"
        border
        style="width: 100%;">
        <el-table-column
          prop="title"
          label=""
          >
        </el-table-column>
        <el-table-column
          prop="pv"
          label="Page View"
        >
        </el-table-column>
        <el-table-column
          prop="uv"
          label="Unique Visitor"
          >
        </el-table-column>
        <el-table-column
          prop="bounce_rate"
          label="跳出率"
          >
        </el-table-column>
      </el-table>
    </div>
    <!--<div class="select-wrap">-->
      <!--<div class="select-box box">-->
        <!--<el-select v-model="value" placeholder="请选择"-->
                   <!--@change="changeSelect">-->
          <!--<el-option-->
            <!--v-for="item in buttonArr"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</div>-->
      <!--<div class="time-box box">-->
        <!--<el-date-picker-->
          <!--v-model="timeValues"-->
          <!--@change="changeTime"-->
          <!--type="daterange"-->
          <!--value-format="yyyy-MM-dd"-->
          <!--:range-separator="$t('bidding.to')"-->
          <!--:start-placeholder="$t('bidding.startTime')"-->
          <!--:end-placeholder="$t('bidding.endTime')">-->
        <!--</el-date-picker>-->
      <!--</div>-->
    <!--</div>-->

    <div class="btn-wrap">
      <h3>时间：</h3>
      <el-button-group class="btn-part">
        <el-button :class="{'active-btn': currentIndex === 1}" @click="toggleIndex(1)">过去7天</el-button>
        <el-button :class="{'active-btn': currentIndex === 2}" @click="toggleIndex(2)">过去30天</el-button>
      </el-button-group>
    </div>

    <el-row>
      <el-col :span="24">
        <div class="echarts-part">
          <div class="title">
            <div class="select-box box">
              <span class="tips-span">走势图</span><el-select v-model="value" placeholder="请选择"
                                                           @change="changeSelect">
              <el-option
                v-for="item in buttonArr"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </div>
          </div>
          <div class="nodata" v-if="showNoData.lineECharts">No Data</div>
          <div class="chart lineECharts" v-loading="loading.lineECharts"></div>
        </div>
      </el-col>
    </el-row>

    <div class="table-wrap-two">
      <el-table
        :data="tableData2"
        border
        style="width: 100%;">
        <el-table-column
          type="index"
          width="30">
        </el-table-column>
        <el-table-column
          prop="title"
          label="时间段"
          sortable
          >
        </el-table-column>
        <el-table-column
          prop="pv"
          label="Page View"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="uv"
          label="Unique Visitor"
          sortable
          >
        </el-table-column>
        <el-table-column
          prop="bounce_rate"
          label="跳出率"
          sortable
          >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getUsername} from '../../../../../../../utils/auth'
  import {getLineData,getBarData,WeChatAccountSearch,WeChatAccountSearch2} from '../../../../api/eServiceSearch'
  import {getSevenDay,mapTime,eServiceTableMap} from '@/filters'

  export default {
    name: "MyCurriculum",
    data() {
      return {
        currentIndex: 1,
        appKey:["XLI4P384IX73"],
        channel:["my_class"],
        testPort: '',
        buttonArr: [
          {label: 'Page View', value: 'pv'},
          {label: 'Unique Visitor', value: 'uv'},
          {label: '跳出率', value: 'bounce_rate'},
        ],
        value:'pv',
        checkedButton: 'PV',
        timeValues: getSevenDay(),
        echartsObj: {
          lineECharts: '',
          barECharts: '',
        },
        loading: {
          lineECharts: false,
          barECharts: false
        },
        showNoData: {
          lineECharts: false,
          barECharts: false
        },
        tableData: [],
        tableData2: [],
      }
    },
    methods: {
      toggleIndex(value) {
        this.currentIndex = value
      },
      initEchartsDom() {
        this.echartsObj.lineECharts = this.echarts.init(document.getElementsByClassName('lineECharts')[0], null, {renderer: 'canvas'})
      },
      checkButton(item){
        this.checkedButton = item.value;
      },
      changeTime(){

      },
      async getTableData(){
        let params = {
          appKey: this.appKey,
          channel: this.channel,
          traffic: ['pv', 'uv', 'bounce_rate']
        };
        try {
          let res = await WeChatAccountSearch(params);
          if (res.status === 200) {
            let resData = res.data;
            this.tableData= eServiceTableMap(resData.data)
          }
        } catch (e) {
          console.log(e);
        }
      },
      async getTableData2(){
        let params = {
          appKey: this.appKey,
          channel: this.channel,
          date:this.timeValues,
          traffic: ['pv', 'uv', 'bounce_rate']
        };
        try {
          let res = await WeChatAccountSearch2(params);
          if (res.status === 200) {
            let resData = res.data;
            this.tableData2 = mapTime(resData.data)
          }
        } catch (e) {
          console.log(e);
        }
      },
      async getDataEchartsLine(params) {
        this.loading.lineECharts = true
        let res = await getLineData(params)
        let resData = res.data.data;
        setTimeout(() => {
          this.loading.lineECharts = false
          this.drawEcharts(resData, '#5EC7F6', 'lineECharts', this.echartsObj.lineECharts, 'line', true)
        }, 0)
      },
      drawEcharts(paramsData, color, noData, echartsObj, echartsType, isSmooth) {
        if (paramsData.series.length !== 0) {
          let xAxisData = {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              // show: false
            },
            axisLabel: {
              interval: 0,
              fontFamily: 'HelveticaNeue',
              fontSize: 10,
              color: '#999999'
            },
            data: paramsData.label.data
          }
          let series = paramsData.series.map(item =>{
            return {
              name: item.name,
              data: item.data,
              type: echartsType,
              smooth: isSmooth,
              barMaxWidth: 30,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
            }
          })
          let option = {
            grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true
            },
            color: color,
            xAxis: xAxisData,
            yAxis: {
              type: 'value',
              axisLabel: {
                fontFamily: 'HelveticaNeue',
                fontSize: 10,
                color: '#999999'
              },
              axisLine: {
                // show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            tooltip: {
              confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            series: series
          }
          this.showNoData[noData] = false
          echartsObj.clear()
          echartsObj.setOption(option)
        } else {
          echartsObj.clear()
          this.showNoData[noData] = true
        }
      },
      loadAllCharts(){
        let params = {
          appKey:this.appKey,
          channel:this.channel,
          traffic:[this.value],
          date:this.timeValues
        }
        this.getDataEchartsLine(params);
      },
      // 联动部分
      changeSelect(){
        this.loadAllCharts();
        this.getTableData2()
      },
      changeTime(){
        this.loadAllCharts();
        this.getTableData2()
      },
      echartsResize(){
        setTimeout(() => {
          this.echartsObj.lineECharts.resize()
        }, 200)
      },
    },
    computed: {
      ...mapGetters(['sidebar'])
    },
    watch: {
      'sidebar.opened': function () {
        this.echartsResize()
      }
    },
    mounted(){
        this.getTableData();
      this.initEchartsDom();
      this.loadAllCharts();
      this.getTableData2();
      window.onresize = () => {
        this.echartsResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .MyCurriculum {
    /**/
    .nodata{
      width: 100%;
      height: 100%;
      text-align:center;
      position: relative;
      top:100px;
      z-index:1;
    }
    .table-wrap {}
    .select-wrap {
      margin-top: 20px;
      clear: both;
      .box {
        display: inline-block;
      }
      .select-box {
        margin-right: 15px;
      }
    }
    .btn-wrap {
      margin: 15px 0;
      h3{
        float:left;
        display:inline-block;
      }
      .btn-part{
        display:inline-block;
        margin: 10px 0 0 10px;
        .el-button {
          padding: 8px;
          color: #333;
          background-color: #fff;
          width: 144px;
          margin: 0 5px;
        }
        .active-btn {
          background-color: #0090e9;
          color: #fff;
        }
      }
    }
    .eCharts-wrap{
      .echarts-part{
        margin-top:20px;
        .title{
          font-family: PingFang-SC-Bold;
          font-size: 20px;
          color: #151515;
          line-height: 24px;
        }
        .chart{
          width:100%;
          height:35vh;
        }
      }
    }
    .chart {
      width: 100%;
      height: 35vh;
    }
    .select-box {
      margin-right: 15px;
      text-align: center;
      .tips-span {
        margin-right: 10px;
        font-weight: bold;
        font-size: 20px;
      }
    }
    .table-wrap-two {
      margin-top: 15px;
    }
  }
</style>
